<!DOCTYPE html>
<html lang="en">
<head>
<!--    https://www.jb51.net/article/93088.htm-->
    <meta charset="UTF-8">
    <title>折线图</title>
    <style>
        .container {
            margin: 30px auto;
            width: 600px;
            height: 300px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div class="container">
    <svg width="100%" height="100%"></svg>
</div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
    window.onload = function() {
        var width = 600, height = 300;
        // SVG画布边缘与图表内容的距离
        var padding = { top: 50, right: 50, bottom: 50, left: 50 };
        // 创建一个分组用来组合要画的图表元素
        var main = d3.select('.container svg').append('g')
        // 给这个分组加上main类
            .classed('main')
            // 设置该分组的transform属性
            .attr('transform', "translate(" + padding.top + ',' + padding.left + ')');
    };
</script>
</body>
</html>